<template>
  <div class="no-award-dialog-content">
    <div class="nianhua">
      <img src="./../assets/imgs/cloud-left.png" class="left-cloud">
      <img src="./../assets/imgs/cloud-right.png" class="right-cloud">
      <div class="head">
        <h4>抽奖虽然没中，但恭喜你</h4>
        <h4>开启了隐藏的智慧生活妙招</h4>
      </div>
      <div class="card">
        <img :src="card.img" @click="openApp">
        <div>
          <p class="title">{{card.title}}</p>
          <p class="des">
            点击 <img src="./../assets/point.png" class="left-hand"><a :href="href">杭银APP</a><img src="./../assets/point.png" class="right-hand">  
            <span class="des-detail">{{card.des}}</span>
          </p>
        </div>
      </div>

      <div class="more">
        <img src="./../assets/imgs/lotto/img_09.png" @click="close" class="heartbeat">
      </div>
    </div>
    <div class="close">
      <img src="./../assets/imgs/close-btn.png" @click="close">
    </div>
  </div>
</template>
<script>
//import  ShakeHand from './shake-hand.vue'
import Utils from './../utils.js'
export default {
  name: "noAward",
  components:{
    
  },
  data () {
    return {
      href:Utils.appSchema,
      list:[
        {
          img:require('./../assets/imgs/lotto/img_05.png'),
          title:'下雪了，别出门缴费了，你的衣服会湿',
          des:'找人帮你缴费'
        },
        {
          img:require('./../assets/imgs/lotto/img_06.png'),
          title:'有一种快乐分期的技巧，叫做乐分卡',
          des:'获得快乐分期的小妙招'
        },
        {
          img:require('./../assets/imgs/lotto/img_07.png'),
          title:'公鸡贷，让“公积”下蛋',
          des:'让您的“公积”下蛋哦'
        },
        {
          img:require('./../assets/imgs/lotto/img_08.png'),
          title:'叮~又帅又会理财的牛大管家到了，请查收',
          des:'即可获得定制的牛大管家哦'
        }
      ]
    };
  },
  computed:{
    card(){
      let Max = this.list.length-1,Min=0
      var Range = Max - Min;
      var Rand = Math.random();
      var num = Min + Math.round(Rand * Range); //四舍五入
      return this.list[num]
    },
  },
  mounted(){
 
  },
  methods:{
    close(){
      this.$emit('close')
      this.$router.push({path:'/'})
    },
    openApp(){
      window.location=this.href
    }
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common.scss';
.no-award-dialog-content{
  padding-top: px2rem(122);
  text-align: center;
  position: relative;
  .nianhua{
    background-image: url('./../assets/imgs/nianhua_middle.png');
    height: px2rem(624);
    width: 90%;
    margin: 0 auto;
    @include bg-img();
    position: relative;
    .right-cloud{
      bottom: px2rem(40);
    }
    .head{
      padding-top: px2rem(100);
      h4{
        @extend .dialog-title;
        background-image: url('./../assets/imgs/nianhua-head.png');
      }
    }
    .card{
      @include bg-img();
      height: px2rem(210);
      width:76%;
      margin: 0 auto;
      background-image: url('./../assets/imgs/lotto/img_02.png');
      position: relative;
      left:px2rem(8);
      color:#eb5a46;
      vertical-align: top;
      box-sizing: border-box;
      padding-top: px2rem(26);
      padding-bottom: px2rem(26);
      img{
        width:px2rem(100);
        height: px2rem(150);
        vertical-align: top;
        margin-left: px2rem(6);
      }
      div{    
        display: inline-block;
        width:px2rem(260);
        text-align: left;
        margin-left: px2rem(20);
        p{
          margin: 0;
          padding:0;
          padding-top: px2rem(10);
          span.des-detail{
            margin-left: px2rem(4);
            //display: inline-block;
            font-size: px2rem(20);
          }
          &.title{
            //@include font-dpr(26px);
            font-weight: bold;
            font-size: px2rem(25);
          }
          &.des{
            font-size: px2rem(20);
            padding-top: px2rem(6);
            a{
              color: #eb5a46;
              text-decoration:none;
              border-bottom: 1px solid #eb5a46;
            }
            img{
              width: px2rem(30);
              height: px2rem(22);
              vertical-align: middle;
              margin-right: px2rem(6);
              &.right-hand{
                transform: scale(-1,1);
              }
            }
            
          }
        }
      }
    }
    .more{
      text-indent: px2rem(10);
      padding-top: px2rem(24);
      img{
        width:70%;
      }
    }
  }
  .close{
    margin-top: px2rem(32);
    img{
      height: px2rem(80);
    }
  }
  .hand-img{
    bottom: px2rem(120);
  }
}
</style>